<template>
  <div class="bindmobile" :style="'padding:' +data.padding.top/2+'px '+data.padding.lr/2+'px '+data.padding.bottom/2+'px '">
    <div class="container" :style="'border-radius:'+ data.radius.top/2+'px '+ data.radius.top/2+'px '+ data.radius.bottom/2+'px '+ data.radius.bottom/2+'px '">
      <div class="main">
        <p class="title" :style="'color:'+data.title.color">
          <i :class="'custom-icon '+data.icon.url" :style="'color:'+data.icon.color"></i>{{data.title.text}}
        </p>
      </div>
      <div :style="'background:'+data.btn.color" class="btn">立即绑定</div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default: {

        }
      }
    },
  }
</script>

<style lang="scss">
  .bindmobile {
    .container {
      margin: 0 auto;
      display: flex;
      flex-wrap: nowrap;
      box-sizing: border-box;
      padding: 10px 7px;
      border-radius: 6px;
      background: rgb(255, 255, 255);
      color: rgb(150, 150, 150);
      p {
        margin: 0;
      }

      .main {
        flex: 1;

        .title {
          font-size: 12px;
          line-height: 14px;
          padding: 7px 0 6px;
          display: flex;

          .custom-icon {
            font-size: 14px;
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            margin: auto 2.443px auto 0;
          }
        }
      }

      .btn {
        min-width: 78px;
        height: 27px;
        padding: 8px;
        border-radius: 27px;
        // background: linear-gradient(159.36deg, #ff3c29 0%, #FF6F29 94.38%);
        color: #fff;
        font-size: 12px;
        line-height: 12px;
        text-align: center;
        margin: auto 0;
      }
    }
  }
</style>
